*
{
margin:0;
padding:0
}
body
{
color:#333;
font:13px/18px 'Open Sans',arial,sans-serif;
font-weight:400;
}
/*------------------- Header----------------------------------- */
#header
{
position:relative;
max-width: 928px;
left:15%;
border-bottom:1px solid #E8E8E8;
}
#header-logo
{
position:relative;
width:246px;
margin-top:20px;
display: inline-block;
}
 /* Nav */
#nav
{
font-size:12px;
display: inline-block;
position: absolute;
right:10px;
bottom: 50px;
}
#nav li
{
font-weight:600;
list-style:none;
position:relative;
text-transform:uppercase;
white-space:nowrap;
display: inline-block;
}
#nav li a
{
background:#fff;
border:0 solid #39c;
position:relative;
color:#333;
text-decoration:none
}
#nav li span
{
border-top:1px solid #fff;
margin:0 30px;
padding:0 5px;
position:relative;

}
#nav li span:HOVER
{
border-bottom:4px solid #39c;
}
 /* le menu actif */
#nav li.active span
{
border-bottom:4px solid #39c;
height:25px
}
/* --------------------------------FIN HEADER-------------------------------------- */
.warper
{
color:#777;
margin-bottom:5em;
min-height:390px;
background-color: yellow;
}
.content
{
 margin-left: 15%;
 margin-right: 15%;
}
@media screen and (max-width:770px)
{
	.g-unit.g-unit
	{
	float:none
}
}
a
{
color:#000;
font-weight:600;
text-decoration:none
}
h1
{
color:#000;
font-size:3.2em;
font-weight:300;
line-height:1.15;
margin:0 0 .7em
}
h2
{
color:#000;
font-size:2.3em;
font-weight:300;
line-height:1.25;
margin:1em 0
}
h3
{
color:#000;
font-size:1.7em;
font-weight:300;
line-height:1.3;
margin:.5em 0
}
h4
{
color:#555;
font-size:13px;
font-weight:600;
line-height:15px;
margin:0 0 .5em
}
p
{
margin:.1em 0 .2em
}
.compact
{
border-left:26px transparent solid;
border-right:26px transparent solid;
max-width:928px;
margin:0 auto
}
#marquee
{
margin:50px auto;
position:relative
}
.marquee-copy h1
{
margin:0 0 .3em;
white-space:nowrap
}
.marquee-copy p
{
padding-right:10px;
font-size:15px
}
#marquee.marquee-stacked
{
margin-top:35px;
text-align:center
}
.marquee-stacked p
{
line-height:20px;
margin-left:auto;
margin-right:auto;
width:55%
}
#footer
{
background:#f3f3f3;
background:-moz-linear-gradient(top,#f3f3f3 0,#fff 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f3f3f3),color-stop(100%,#fff));
background:-webkit-linear-gradient(top,#f3f3f3 0,#fff 100%);
background:-o-linear-gradient(top,#f3f3f3 0,#fff 100%);
background:-ms-linear-gradient(top,#f3f3f3 0,#fff 100%);
background:linear-gradient(top,#f3f3f3 0,#fff 100%);
font-size:11px;
padding:15px 0 20px;
width:100%;
text-align: center;
}
html
{
overflow-y:scroll;
}
section
{
display:block
}
a
{
color:#333
}
p
{
line-height:1.6
}
#marquee h1
{
margin:0 0 .3em
}
.marquee-copy p
{
font-weight:400;
line-height:1.4em
}

.wrapper #marquee
{
margin-bottom:0
}
.wrapper h2
{
color:#555;
font:13px/20px 'Open Sans',arial,sans-serif;
font-weight:600
}
.topics
{
list-style:none;
overflow:hidden;
margin:3.5em auto
}
.topics li
{
float:left;
width:32%;
border:1px solid #ddd;
text-align:center;
margin:0 5px
}
.topics .ss
{
/* background:#fff url(../images/screenshots/ty-sprite.png) no-repeat; */
width:100%;
max-width:100%;
height:120px;
margin:20px auto
}
.topics .topic .ss
{
background-position:12px -125px
}
.topics .ty-install .ss
{
background-position:-300px -123px
}
.topics .ty-run .ss
{
background-position:-615px -115px
}
.extra-instructions
{
text-align:center
}
.marquee-copy p
{
width:auto
}

article
{
margin:20px 0
}
* html .compact
{
border-left:26px #fff solid;
border-right:26px #fff solid;
width:928px
}

*+html .marquee-copy h1
{
white-space:inherit
}
/*  Forumulaire */
.form
{
	
}
.form td{
	padding-bottom:6px;
}
.form input {
  padding: 2px;
  border: 1px solid #CCC;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  width: 200px;
  height: 25px;
}

.form input:focus {
  border-color: rgba(82, 168, 236, 0.75);
  -moz-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
  -webkit-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
  box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
}

.correct {
  border-color: rgba(68, 191, 68, 0.75);
}

.correct:focus {
  border-color: rgba(68, 191, 68, 0.75);
  -moz-box-shadow: 0 0 8px rgba(68, 191, 68, 0.5);
  -webkit-box-shadow: 0 0 8px rgba(68, 191, 68, 0.5);
  box-shadow: 0 0 8px rgba(68, 191, 68, 0.5);
}

.incorrect {
  border-color: rgba(191, 68, 68, 0.75);
}

.incorrect:focus {
  border-color: rgba(191, 68, 68, 0.75);
  -moz-box-shadow: 0 0 8px rgba(191, 68, 68, 0.5);
  -webkit-box-shadow: 0 0 8px rgba(191, 68, 68, 0.5);
  box-shadow: 0 0 8px rgba(191, 68, 68, 0.5);
}
.tooltip {
  display: inline-block;
  margin-left: 20px;
  padding: 2px 4px;
  border: 1px solid #555;
  background-color: #CCC;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}
/*------------------------------- Buttons */
.button
{        
  display: inline-block;
  white-space: nowrap;
  background-color: #ddd;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
  background-image: -webkit-linear-gradient(top, #eee, #ccc);
  background-image: -moz-linear-gradient(top, #eee, #ccc);
  background-image: -ms-linear-gradient(top, #eee, #ccc);
  background-image: -o-linear-gradient(top, #eee, #ccc);
  background-image: linear-gradient(top, #eee, #ccc);
  border: 1px solid #777;
  padding: 0 1.5em;
  margin: 0.5em;
  font: bold 1em/2em Arial, Helvetica;
  text-decoration: none;
  color: #333;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  -moz-border-radius: .2em;
  -webkit-border-radius: .2em;
  border-radius: .2em;
  -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
  -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
  box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}
    
 .button:hover
 {
  background-color: #eee;        
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
  background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
  background-image: -moz-linear-gradient(top, #fafafa, #ddd);
  background-image: -ms-linear-gradient(top, #fafafa, #ddd);
  background-image: -o-linear-gradient(top, #fafafa, #ddd);
  background-image: linear-gradient(top, #fafafa, #ddd);
 }
 .button:active
  {
  -moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
  -webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
  box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
  position: relative;
  top: 1px;
  }
.button:focus
{
 outline: 0;
 background: #fafafa;
}    
.button:before
{
  background: #ccc;
  background: rgba(0,0,0,.1);
  float: left;        
  width: 1em;
  text-align: center;
  font-size: 1.5em;
  margin: 0 1em 0 -1em;
  padding: 0 .2em;
  -moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
  -webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
   box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
  -moz-border-radius: .15em 0 0 .15em;
  -webkit-border-radius: .15em 0 0 .15em;
  border-radius: .15em 0 0 .15em;     
  pointer-events: none;		
 }
	
	/* Buttons and inputs */
	
	button.button, input.button 
	{ 
		cursor: pointer;
		overflow: visible; /* removes extra side spacing in IE */
	}
	
	/* removes extra inner spacing in Firefox */
	button::-moz-focus-inner 
	{
	  border: 0;
	  padding: 0;
	}
	
	/* If line-height can't be modified, then fix Firefox spacing with padding */
	 input::-moz-focus-inner 
	{
	  padding: .4em;
	}

	/* The disabled styles */
	.button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover 
	{
		background: #eee;
		color: #aaa;
		border-color: #aaa;
		cursor: default;
		text-shadow: none;
		position: static;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;		
	}
    /* Hexadecimal entities for the icons */
    .add:before
    {
        content: "\271A";
    }
    .edit:before
    {
        content: "\270E";        
    }
    .delete:before
    {
        content: "\2718";        
    }
    .save:before
    {
        content: "\2714";        
    }
    .email:before
    {
        content: "\2709";        
    }
    .like:before
    {
        content: "\2764";        
    }
    .next:before
    {
        content: "\279C";
    }
    .star:before
    {
        content: "\2605";
    }
    .spark:before
    {
        content: "\2737";
    }
    .play:before
    {
        content: "\25B6";
    }

/* ===== Notification messages ===== */

.nNote { cursor: pointer; clear: both; margin: 20px 0px 20px 0px; }
.nNote strong { margin-right: 5px; }
.nNote p { font-size: 11px; padding: 10px 25px 10px 54px; margin: 0px; color: #565656; }
.nMessage p { font-size: 11px; }
.nWarning { background: #ffe9ad url(../imgs/error.png) no-repeat 15px center; border: 1px solid #eac572; color: #826200; }
.nSuccess { background: #effeb9 url(../imgs/accept.png) no-repeat 15px center; border: 1px solid #c1d779; color: #3C5A01; }
.nFailure { background: #fccac1 url(../imgs/exclamation.png) no-repeat 1px; border: 1px solid #e18b7c; color: #AC260F;padding-left: 30px;  }
.nInformation { background: #d1e4f3 url(../imgs/information.png) no-repeat 15px center; border: 1px solid #99c4ea; color: #235685; }
.nLightbulb { background: #FEF0CB url(../imgs/lightbulb.png) no-repeat 15px center; border: 1px solid #D3A350; color: #835F21; }
.nMessages { background: #9DDFFF url(../imgs/email.png) no-repeat 15px center; border: 1px solid #42B4FF; color: #835F21; }
